<template>
  <div class="my" ref="my" v-if="userinfo.username">
    <div :style="opacity10" ref="bg">
      <!-- 背景 -->
      <div class="m_pr bg">
        <van-uploader :after-read="afterRead" class="upload">
          <van-image v-if="userinfo.backgroundUrl" class="m_w" :src="ip+userinfo.backgroundUrl" fit="cover"></van-image>
          <van-image v-else class="m_w" :src="require('../assets/images/bg.jpeg')" fit="cover"></van-image>
        </van-uploader>
        <van-icon name="setting-o" size="20" color="#fff" class="m_pa m_br50p m_tac setting"
          @click="$router.push('/setting')"/>
      </div>

      <!-- 用户信息 -->
      <div class="userinfo">
        <div class="m_flex m_fjcsb m_faic avatar_edit">
          <img v-if="userinfo.avatarUrl" class="m_br50p avatar" :src="ip+userinfo.avatarUrl">
          <div v-else class="m_br50p m_tac m_fs30 m_fw avatar avatar2">{{userinfo.username.slice(0,1)}}</div>
          <i class="m_fs16 m_tac m_fw edit iconfont icon-bianji"
          @click="$router.push('/edit')"
          > 编辑个人资料</i>
        </div>
        <div class="m_fs22 m_fw nickname">{{userinfo.nickname?userinfo.nickname:userinfo.username}}</div>
        <div class="m_fs14 number">叮咚号：{{userinfo.username}}</div>
        <div class="m_fs16 intro">{{userinfo.signature?userinfo.signature:'填写个性签名,展示自我'}}</div>
      </div>
    </div>

    <!-- 用户名：滚动显示 -->
    <van-nav-bar fixed v-show="showName" :style="opacity01">
      <template #title>
        {{userinfo.nickname?userinfo.nickname:userinfo.username}}
      </template>
      <template #right>
        <van-icon name="ellipsis" size="20" color="#333" @click="toSetting"/>
      </template>
    </van-nav-bar>

    <!-- 视频标签页 -->
    <van-tabs v-model="active" animated swipeable
    color="#008080" title-inactive-color="#999" title-active-color="#1f1d1e">
      <!-- 发布 -->
      <van-tab :title="`发布 `+publishes.length">
        <div class="tab_content">
          <div class="m_flex m_fwr">
            <post-item v-for="item,index in publishes" :key="item.id" :item="item"
              @click="toPlayList(publishes, index)"></post-item>
          </div>
          <div class="tip">{{publishes.length>0?'到底啦':'还没有哦'}}</div>
        </div>
      </van-tab>
      <!-- 点赞 -->
      <van-tab :title="`点赞 `+likes.length">
        <div class="m_flex m_fwr tab_content">
          <post-item v-for="item,index in likes" :key="item.id" :item="item"
            @click="toPlayList(likes, index)"></post-item>
        </div>
        <div class="tip">{{likes.length>0?'到底啦':'还没有哦'}}</div>
      </van-tab>
      <!-- 收藏 -->
      <van-tab :title="`收藏 `+collects.length">
        <div class="m_flex m_fwr tab_content">
          <post-item v-for="item,index in collects" :key="item.id" :item="item"
            @click="toPlayList(collects, index)"></post-item>
        </div>
        <div class="tip">{{collects.length>0?'到底啦':'还没有哦'}}</div>
      </van-tab>
    </van-tabs> 

    <van-loading v-if="isloading" size="24" class="m_tac"/>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
import PostItem from '@/components/PostItem.vue'
export default {
  name: 'My',
  components:{
    PostItem
  },
  data() {
    return {
      active: 0,
      publishes: [],
      likes: [],
      collects: [],
      isloading: false,
      showName: false,
      opacity10: {opacity:1},
      opacity01: {opacity:0},
    };
  },
  computed: {
    ...mapState(['ip']),
    ...mapState('m_user',['userinfo']),
  },
  methods: {
    ...mapMutations('m_user',['setUserinfo']),
    ...mapMutations('m_video',['setVideoList']),
    // 获取用户发布、点赞、收藏的视频
    getVideos(){
      this.isloading=true
      this.axios.get('/user/videos').then(res=>{
        this.isloading = false
        if(res.code===0){
          this.publishes = res.dt.publishes
          this.likes = res.dt.likes
          this.collects = res.dt.collects
        }else{
          this.$toast('获取用户发布、点赞、收藏的视频失败')
        }
      })
    },
    // 滚动隐藏
    onScroll(){
      const y1 = this.$refs.my.scrollTop
      const y2 = this.$refs.bg.clientHeight - 80
      if(y1>y2){
        this.showName = true
        let opacity = y1 / 300
        opacity = opacity>=1? 1: opacity
        this.opacity10 = {opacity: 1 - opacity}
        this.opacity01 = {opacity: opacity}
      }else{
        this.showName = false
        this.opacity10 = {opacity:1}
        this.opacity01 = {opacity:0}
      }
    },
    // 背景
    afterRead(file){
      const fd = new FormData()
      fd.append('backgroundFile',file.file)
      this.axios.post('/update/background',fd, {
        processData: false,
        contentType: false
      }).then(res=>{
        if(res.code===0){
          this.userinfo.backgroundUrl = res.dt
          this.setUserinfo(this.userinfo)
          this.$toast('修改成功')
        }else{
          this.$toast('修改失败')
        }
      })
    },
    // 去设置页
    toSetting(){
      this.showName=false
      this.opacity10 = {opacity:1}
      this.$router.push('/setting')
    },
    // 去播放列表页
    toPlayList(list,initIndex){
      this.setVideoList(list)
      this.$router.push({path:'/play',query:{initIndex}})
    }
  },
  created(){
    this.getVideos()
  },
  mounted(){
    this.$refs.my.addEventListener('scroll',this.onScroll)
  },
}
</script>

<style lang="scss">
.my{
  height: calc(100vh - 50px);
  padding-bottom: 50px;
  overflow: scroll;
  &::-webkit-scrollbar{ display: none;}
  .bg{
    height: 120px;
    .van-uploader{
      display: block;
    }
    .van-image{
      width: 100vw;
      height: 120px;
    }
    .setting{
      top: 15px;
      right: 15px;
      width: 34px;
      line-height: 34px;
      background: rgba($color: #000, $alpha: .3);
      color: #fff;
    }
  }
  .userinfo{
    padding: 0 15px;
    .avatar_edit{
      transform: translateY(-12px);
      .avatar{
        width: 100px;
        height: 100px;
        line-height: 90px;
        color: #fff;
        &.avatar2{ 
          width: 90px;
          height: 90px;
          background: #008080;
        }
      }
      .edit{
        width: 150px;
        line-height: 40px;
        background: #f7f8fa;
        border-radius: 3px;
        margin-right: 5px;
        color: #222;
      }
    }
    .nickname{ color: #222; }
    .number{
      color: #999;
      padding: 14px 0;
      border-bottom: 1px solid #ebebeb;
    }
    .intro{
      padding: 12px 0;
      line-height: 24px;
      color: #555;
    }
  }
  .showName{ line-height: 50px; }
  .van-tabs{
    .tab_content{
      border-top: 1px solid #ebebeb;
      max-height: calc(100vh - 150px);
      overflow: scroll;
    }
    .tip{
      text-align: center;
      font-size: 14px;
      color: #999;
      line-height: 50px;
    }
  }
  .van-loading{ padding-top: 20px;}
}
</style>
